<!DOCTYPE html>
<html>
<head lang="zh-CH">
	<meta charset="utf-8" />
	<title>小米活动页</title>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script src="js/jquery-1.11.1.js"></script>
	

</head>
<body>
<!--结构化元素: 让元素更加语义化,有利于SEO
	header元素，网页头部：导航，介绍
	main元素：网页只能出现一个，显示网页主体
		nav元素：用于导航/导航条/翻页/使用于网页头尾部
		article元素:独立的内容区块。左栏，功能栏
		aside元素：广告，介绍左栏，配合article元素使用
	footer元素：网页尾部：商标，版本号，介绍
-->
<header>
	<!==留白,中控区域==>
	<div id="head_wrapper">
		<div class="left">
			<ul>
				<li><a href="#">小米网</a></li>
				<li><a href="#">MIUI</a></li>
				<li><a href="#">米聊</a></li>
				<li><a href="#">游戏</a></li>
				<li><a href="#">多看阅读</a></li>
				<li><a href="#">云服务</a></li>
				<li><a href="#">小米移动</a></li>
				<li><a href="#">问题反馈</a></li>
				<li><a href="#" class="c">Select Region</a></li>
			</ul>
		</div>
		<div class="right">
			<ul>
				<!--精灵图：整图png(icon),减少服务器请求
					1. 用i元素占位
					定位position:位移
				-->
				<li class="fix"><i class="shop"></i><a href="#" class="c">购物车(0)</a></li>
				<li><a href="register.html">注册</a></li>
				<li><a href="login.html">登录</a></li>
			</ul>
		</div>
	</div>
</header>

<main>
	<!--导航-->
	<nav>
		<div id="nav_wrapper">
			<div class="left">
				<ul>
					<li><div><img src="images/LOGO.png"><img src="images/donghua.gif"></div></li>
					<li><a href="#">小米盒子</a></li>
					<li><a href="#">红米</a></li>
					<li><a href="#">平板</a></li>
					<li><a href="#">电视</a></li>
					<li><a href="#">盒子</a></li>
					<li><a href="#">路由器</a></li>
					<li><a href="#">智能硬件</a></li>
					<li><a href="#">服务</a></li>
					<li><a href="#" class="c">社区</a></li>
				</ul>
			</div>
			<div class="right">
				<ul>
					<li class="searchli"><i class="search"></i></li>
					<li class="inputli"><input type="text"></li>
				</ul>
			</div>
		</div>
	</nav>
	<!--左栏-->
	<section>
	<!--广告-->
	<aside class="banner">
		<ul>
	        <li><img src="images/banner01.jpg"></li>
	        <li><img src="images/banner02.jpg"></li>
	        <li><img src="images/banner03.jpg"></li>
	        <li><img src="images/banner04.jpg"></li>
	        <li><img src="images/banner05.jpg"></li>
	   </ul>
	</aside>
	<article>
		<div class="out"></div>
		<ul class="sidebar">
			<li class="l1"><a href="#">手机 平板 电话卡<span class="gt">&gt;</span></a></li>
			<li><a href="#">电视 盒子<span class="gt">&gt;</span></a></li>
			<li><a href="#">路由器 智能硬件<span class="gt">&gt;</span></a></li>
			<li><a href="#">移动电源 插线板<span class="gt">&gt;</span></a></li>
			<li><a href="#">耳机 音响<span class="gt">&gt;</span></a></li>
			<li><a href="#">电池 存储卡<span class="gt">&gt;</span></a></li>
			<li><a href="#">保护壳 后盖<span class="gt">&gt;</span></a></li>
			<li><a href="#">贴膜 其他配件<span class="gt">&gt;</span></a></li>
			<li><a href="#">米兔 服装<span class="gt">&gt;</span></a></li>
			<li><a href="#">箱包 其他周边<span class="gt">&gt;</span></a></li>
		</ul>
	</article>
	<div class="left_div"></div>
	<div></div>
	<div></div>
	<div></div>
	</section>
	<div id="banner_min1">
		<div class="banner_min1_left"><img src="images/left.png"/></div>
		<div class="banner_min1_right"><img src="images/subnav_icon01.png"/></div>
		<div class="banner_min1_right"><img src="images/subnav_icon02.jpg"/></div>
		<div class="banner_min1_right"><img src="images/subnav_icon03.png"/></div>
	</div>
	<div id="banner_min2">
		<div class="banner_min2_top"">
			<span class="span_lt_h2">小米明星单品</span>
			<div class="div_right"><a href="#">&gt;</a></div>
			<div class="div_right"><a href="#">&lt;</a></div>

		</div>
		<div class="banner_min2_bottom">
			<div id="banner_min2_bottom1" class="banner_min2_bottom_div">
				<div><img src="images/chazuo.png"/></div>
				<a class="main_a_color" href="#">小米智能插座 基础班</a><br>
				<span class="span_Introduction">手机远程遥控，让普通电器变智能</span><br><br>
				<span class="span_price">49元</span>
			</div>
			<div id="banner_min2_bottom2" class="banner_min2_bottom_div">
				<div><img src="images/jinghuaqi.png" alt="" /></div>
				<a class="main_a_color" href="#">小米空气净化器2</a><br>
				<span class="span_Introduction">净化能力高达310m<sup>3</sup>/h</span><br><br>
				<span class="span_price">699元</span>
			</div>
			<div id="banner_min2_bottom3" class="banner_min2_bottom_div">
				<div><img src="images/chaban.png" alt="" /></div>
				<a class="main_a_color" href="#">小米智能插线板</a><br>
				<span class="span_Introduction">手机控制家中电器，智能节电</span><br><br>
				<span class="span_price">69元</span>
			</div>
			<div id="banner_min2_bottom4" class="banner_min2_bottom_div">
				<div><img src="images/erji.png" alt="" /></div>
				<a class="main_a_color" href="#">小米圈铁耳机</a><br>
				<span class="span_Introduction">动圈+动铁，双发声单元</span><br><br>
				<span class="span_price">69元</span>
			</div>
			<div id="banner_min2_bottom5" class="banner_min2_bottom_div">
				<div><img src="images/luyouqi.png" alt="" /></div>
				<a class="main_a_color" href="#">小米路由器 青春版</a><br>
				<span class="span_Introduction">将高性能路由器，凝聚于掌心大小</span><br><br>
				<span class="span_price">79元</span>
			</div>
		</div>
	</div>
	<div id="main_other">
	<div class="main_znyj">
		<div class="main_znyj_top">
			<span class="span_lt_h2">智能硬件</span>
			<div class="div_right"><a href="#">查看全部</a><i></i></div>
		</div>
		<div class="main_znyj_bottom">
			<div class="main_znyj_left">
				<img src="images/haraware_kid.png"/>
			</div>
			<div class="main_znyj_right">
				<ul id="znyj_right_ul1">
					<li>
						<div class="li_every_div"><img src="images/haraware_tizhongcheng.png" alt="" /></div>
						<a class="main_a_color" href="#">小米体重秤</a><br>
						<span class="span_Introduction">高精度压力传感器，手机管理全家健康</span><br>
						<span class="span_price">99元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_luyouqi.png" alt="" /></div>
						<a class="main_a_color" href="#">小米路由器3</a><br>
						<span class="span_Introduction">更安全更稳定，安全发售</span><br>
						<span class="span_price">149元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_shouhuan.png" alt="" /></div>
						<a class="main_a_color" href="#">小米手环 光感版</a><br>
						<span class="span_Introduction">实时监测心率，科学运动</span><br>
						<span class="span_price">99元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_anfang.png" alt="" /></div>
						<a class="main_a_color" href="#">小米智能安全套装</a><br>
						<span class="span_Introduction">智能禁戒，为您的家增添一份安心</span><br>
						<span class="span_price">699元</span>
					</li>
				</ul>
				<ul id="znyj_right_ul2">
					<li>
						<div class="li_every_div"><img src="images/haraware_xiaoyi.png" alt="" /></div>
						<a class="main_a_color" href="#">小米运动相机</a><br>
						<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
						<span class="span_price">399元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_xieya.png" alt="" /></div>
						<a class="main_a_color" href="#">iHealth智能血压计（蓝牙版）</a><br>
						<span class="span_Introduction">送给父母的健康礼物</span><br>
						<span class="span_price">199元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_shexiangtou.png" alt="" /></div>
						<a class="main_a_color" href="#">小米智能摄像机 夜视版</a><br>
						<span class="span_Introduction">能看能听能说，手机远程观看</span><br>
						<span class="span_price">149元</span>
					</li>
					<li>
						<div class="li_every_div"><img src="images/haraware_light.png" alt="" /></div>
						<a class="main_a_color" href="#">Yeelight床头灯</a><br>
						<span class="span_Introduction">触摸式操作，给卧室1600万种颜色</span><br>
						<span class="span_price">699元</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="main_dp">
		<div class="main_dp_top">
			<span class="span_lt_h2">搭配</span>
			<div class="div_rt_h2"><a href="#">热门</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">耳机音箱</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">电源</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">电池</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">存储卡</a></div>
		</div>
		<div class="main_dp_bottom">
			<ul class="every_ul_1">
				<li class="every_li_1">
					<img src="images/dapei_icon01.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon03.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon04.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon05.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon06.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
			</ul>
			<ul"every_ul_2">
				<li class="every_li_1">
					<img src="images/dapei_icon02.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon07.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon08.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/dapei_icon09.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li_last">
					<div class="every_div_rt1">
						<img src="images/content-top_icon01.png"/>
					</div>
					<div class="every_div_rt">
						<img src="images/content-top_icon02.png"/>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	
	
	
	
	
		
	<div class="main_zb">
		<div class="main_zb_top">
			<span class="span_lt_h2">周边</span>
			<div class="div_rt_h2"><a href="#">热门</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">服装</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">米兔</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">生活周边</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">箱包</a></div>
		</div>
		<div class="main_zb_bottom">
			<ul class="every_ul_1">
				<li class="every_li_1">
					<img src="images/peijian_icon01.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon03.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon04.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon05.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon06.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
			</ul>
			<ul"every_ul_2">
				<li class="every_li_1">
					<img src="images/peijian_icon02.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon07.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon08.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/peijian_icon09.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li_last">
					<div class="every_div_rt1">
						<img src="images/peijian_icon10.png"/>
					</div>
					<div class="every_div_rt">
						<img src="images/content-top_icon02.png"/>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	
	<div class="main_pj">
		<div class="main_pj_top">
			<span class="span_lt_h2">配件</span>
			<div class="div_rt_h2"><a href="#">热门</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">保护套</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">后盖</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">贴膜</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">其他配件</a></div>
		</div>
		<div class="main_pj_bottom">
			<ul class="every_ul_1">
				<li class="every_li_1">
					<img src="images/zhoubian_icon01.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon03.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon04.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon05.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon06.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
			</ul>
			<ul"every_ul_2">
				<li class="every_li_1">
					<img src="images/zhoubian_icon02.png"/>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon07.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon08.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li">
					<div class="li_every_div"><img src="images/zhoubian_icon09.png" alt="" /></div>
					<a class="main_a_color" href="#">小米运动相机</a><br>
					<span class="span_Introduction">边玩边录边拍，手机随时分享</span><br>
					<span class="span_price">399元</span>
				</li>
				<li class="every_li_last">
					<div class="every_div_rt1">
						<img src="images/peijian_icon10.png"/>
					</div>
					<div class="every_div_rt">
						<img src="images/content-top_icon02.png"/>
					</div>
				</li>
			</ul>
		</div>
	</div>

	
	
	
	
	
	
	
	
	</div>
</main>

<footer>
	
	<div id="footer_icon">
		<div id="footer_wp">
			<ul>
				<li id="li_i1"><i class="f_i1"></i><a href="#">预约维修服务</a></li>
				<li><i class="f_i2"></i><a href="#">7天无理由退货</a></li>
				<li><i class="f_i3"></i><a href="#">15天免费换货</a></li>
				<li><i class="f_i4"></i><a href="#">满150元包邮</a></li>
				<li><i class="f_i5"></i><a href="#">520余家售后网点</a></li>
			</ul>
		</div>
		<div id="footer_mapper">
			<div id="footer_team_left">
				<div id="foot_shugang">
					<ul id="footer_team_left_ul1">
						<li>帮助中心</li>
						<li>服务支持</li>
						<li>线下门店</li>
						<li>关于小米</li>
						<li>关注我们</li>
						<li class="footer_team_left_ul_li">特色服务</li>
					</ul><br><br><br>
					<ul>
						<li>账户管理</li>
						<li>售后政策</li>
						<li>小米之家</li>
						<li>了解小米</li>
						<li>新浪微博</li>
						<li class="footer_team_left_ul_li">F 码通道</li>
					</ul><br><br>
					<ul>
						<li>购物指南</li>
						<li>自助服务</li>
						<li>服务网点</li>
						<li>加入小米</li>
						<li>官方微信</li>
						<li class="footer_team_left_ul_li">联系我们</li>
					</ul><br><br>
					<ul>
						<li>订单操作</li>
						<li>相关下载</li>
						<li>授权体验店</li>
						<li>投资者关系</li>
						<li>礼物码</li>
						<li class="footer_team_left_ul_li">防伪查询</li>
					</ul>
				</div>
			</div>
			<div id="footer_team_right">
					<div><span class="foot_span">400-100-5678</span><br>
					<span>
					周一至周日 8:00-18:00<br>
					（仅收市话费）<br><br>
					</span>
					<input type="button" value="24小时在线客服" />
					</div>
			</div>
		</div>
	</div>
	<div id="footer_team">
		
	</div>
	
</footer>

</body>
<script type="text/javascript" src="js/jquery.terseBanner.min.js" ></script>
<script type="text/javascript">
			$(function(){
			$('.banner').terseBanner(); 
			$("article ul.sidebar li").hover(function(){
				$("article div.out").css("display","block");
			},function(){
				$("article div.out").css("display","none");
			});
		});
		
</script>
</html>
